<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css" />
    <script src="http://localhost:3000/socket.io/socket.io.js"></script>
</head>

<body>
    <div class="title">
        <h1>欢迎</h1>
    </div>
    <div class="content">
        <img src="https://img0.baidu.com/it/u=2641342856,4011218934&fm=253&fmt=auto&app=120&f=JPEG?w=881&h=500" />
    </div>
    <div class="input">
        <ul id="shows">
        </ul>
        <div class="inputs">
            <input id="information" type="text" placeholder="请输入信息"><input id="btn" type="button" value="发送">
        </div>
    </div>

</body>
<script>
    var name = prompt("请输入昵称");
    while(!Boolean(name)){ 
        alert("请输入姓名,否则将以游客身份进入聊天室");
        name = prompt("点击取消,以游客身份进入")
    }
    if(name == "null"){     
        name = "新用户@"+Math.floor(Math.random()*10000);
    }
    var shows =document.getElementById("shows")
    const clinet = io.connect('ws://localhost:3000');
    clinet.on('result',(obj)=>{
        console.log(obj);
        var oil = document.createElement("li");
        oil.innerHTML = "<span>"+obj.name+":</span>"+obj.value;
        shows.appendChild(oil);
    })
    document.getElementById("btn").onclick=function(){
        var info = document.getElementById("information").value;
        clinet.emit("info",{name:name,value:info});
    };
    


    

</script>

</html>